<template>
    <div>
        <div class="container_box">
            <el-button type="primary"
                       @click="$router.go(-1)">返回</el-button>
            <div class="u-flex u-flex-row u-row-between">
                <div>
                    课程详情
                </div>
            </div>
        </div>
        <div class="padding_box">
            <!-- <div class="container_box">
                <div class="container_title">课程类型</div>
                <div class="product-type u-flex u-row-around u-col-center">
                    <div>平台课程</div>
                    <img class="product-type-img"
                         :src="imgUrl"
                         alt="">
                    <img class="product-select"
                         src="@/assets/img/product_select.png"
                         alt="">
                </div>
            </div> -->
            <div class="container_box">
                <div class="container_title">基本信息</div>
                <el-form ref="form"
                         :model="productDetails"
                         :rules="rules"
                         label-width="80px">
                    <el-form-item label="封面图片"
                                  prop="pic">
                        <el-image style="margin-top:15px"
                                  class="merchant-img"
                                  fit="cover"
                                  :src="productDetails.pic"
                                  :preview-src-list="[productDetails.pic]">
                        </el-image>
                    </el-form-item>
                    <el-form-item label="轮播图片"
                                  prop="carouselimg">
                        <el-image v-for="(item,index) in productDetails.albumPics"
                                  :key="index"
                                  style="margin-top:15px"
                                  class="merchant-img"
                                  fit="cover"
                                  :src="item"
                                  :preview-src-list="productDetails.albumPics">
                        </el-image>
                    </el-form-item>

                    <el-form-item label="课程名称"
                                  prop="productName"
                                  style="width:40%">
                        <el-input disabled
                                  v-model="productDetails.name"></el-input>
                    </el-form-item>

                    <el-form-item label="课程分类"
                                  style="width:40%">
                        <el-input disabled
                                  v-model="productDetails.categoryName"></el-input>
                    </el-form-item>

                    <el-form-item label="课程售价"
                                  prop="productName"
                                  style="width:40%">
                        <el-input disabled
                                  v-model="productDetails.priceDouble"></el-input>
                    </el-form-item>
                    <!-- <el-form-item label="课程划线价"
                                  prop="productName"
                                  style="width:40%">
                        <el-input disabled
                                  v-model="productDetails.originalPrice"></el-input>
                    </el-form-item>
                    <el-form-item label="课程成本价"
                                  prop="productName"
                                  style="width:40%">
                        <el-input disabled
                                  v-model="productDetails.price"></el-input>
                    </el-form-item> -->
                    <el-form-item label="详情内容">
                        <quill-editor ref="QuillEditor"
                                      v-model="productDetails.detailTabs[0].tabDetails"
                                      :options="editorOption"></quill-editor>
                    </el-form-item>
                    <el-form-item label="规格信息">
                        <el-table :data="skuList"
                                  border
                                  class="table"
                                  ref="multipleTable"
                                  header-cell-class-name="table-header">
                            <el-table-column prop="promotionType"
                                             label="规格图片"
                                             align="center">
                                <template slot-scope="scope">
                                    <img style="max-width:100px"
                                         :src="scope.row.pic"
                                         alt="">
                                </template>
                            </el-table-column>
                            <el-table-column label="规格类型"
                                             align="center">
                                <template slot-scope="scope">
                                    <span v-for="(item1,index1) in JSON.parse(scope.row.spData)"
                                          :key="index1"> {{ item1.value }} {{ (JSON.parse(scope.row.spData).length>0 && index1<(JSON.parse(scope.row.spData).length-1))? '+':'' }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="price"
                                             label="售价"
                                             align="center">
                            </el-table-column>
                            <!-- <el-table-column prop="price"
                                             label="成本价"
                                             align="center">
                            </el-table-column> -->
                            <el-table-column prop="originalPrice"
                                             label="市场价"
                                             align="center">
                            </el-table-column>
                            <el-table-column prop="stock"
                                             label="库存"
                                             align="center">
                            </el-table-column>
                            <el-table-column prop="sale"
                                             label="销量"
                                             align="center">
                            </el-table-column>
                            <!-- <el-table-column prop="commission"
                                             label="是否参与分佣"
                                             align="center">
                                <template slot-scope="scope">
                                    <el-tag>{{scope.row.commission?'参与':'不参与'}}</el-tag>
                                </template>
                            </el-table-column> -->
                            <!-- <el-table-column prop="promotionType"
                                             label="促销类型"
                                             align="center">
                                <template slot-scope="scope">
                                    <el-tag>{{scope.row.online==0?'市场价':'销售价格'}}</el-tag>
                                </template>
                            </el-table-column> -->
                        </el-table>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
import axios from '@/utils/axios.js';

import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';
import { quillEditor } from 'vue-quill-editor';
import VueCropper from 'vue-cropperjs';
import { Loading } from 'element-ui';
import tTable from '@/components/t-table/t-table.vue';
import tTh from '@/components/t-table/t-td.vue';
import tTr from '@/components/t-table/t-tr.vue';
import tTd from '@/components/t-table/t-td.vue';
// 工具栏配置
const toolbarOptions = [
    ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
    ['blockquote', 'code-block'],
    [{ 'header': 1 }, { 'header': 2 }],               // custom button values
    [{ 'list': 'ordered' }, { 'list': 'bullet' }],
    [{ 'script': 'sub' }, { 'script': 'super' }],      // superscript/subscript
    [{ 'indent': '-1' }, { 'indent': '+1' }],          // outdent/indent
    [{ 'direction': 'rtl' }],                         // text direction

    [{ 'size': ['small', false, 'large', 'huge'] }],  // custom dropdown
    [{ 'header': [1, 2, 3, 4, 5, 6, false] }],

    [{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme
    [{ 'font': [] }],
    [{ 'align': [] }],
    ['link', 'image', 'video'],
    ['clean']                                         // remove formatting button
]
export default {
    Uname: 'baseform',
    name: 'editor',
    data: function () {
        return {
            skuList: [],
            imgUrl: 'https://songsujiazhang.oss-cn-shenzhen.aliyuncs.com/2021/07/20/4f0af133-0c06-429b-93c9-ab4c68a6273f.jpg',
            productDetails: {
                detailTabs: [{ tabDetails: '' }],
            },
            queryData: {

            },
            editStatus: false,
            productCategory: '',
            productCategoryList: [],
            editorOption: {
                modules: {
                    toolbar: {
                        container: toolbarOptions,  // 工具栏
                        handlers: {
                            'image': function (value) {
                                if (value) {
                                    document.querySelector('.el-upload').click()
                                    // this.onSubmit()
                                    // alert('自定义图片',value)
                                } else {
                                    this.quill.format('image', false);
                                }
                            }
                        }
                    }
                }
            },
            rules: {
                specifications: [{ required: true, message: '', trigger: 'blur' }],
                pic: [{ required: true, message: '', trigger: 'blur' }],
                carouselimg: [{ required: true, message: '', trigger: 'blur' }],
                productName: [{ required: true, message: '', trigger: 'blur' }],
                title: [{ required: true, message: '', trigger: 'blur' }],
            },
        };
    },
    components: {
        quillEditor,
        VueCropper,
        tTable,
        tTh,
        tTr,
        tTd,

    },
    activated() {

    },
    created() {
        this.getData()
        this.getSku()
        // this.getProductCategory()
    },
    methods: {
        getData() {
            let data = { id: this.$route.query.id }
            axios({
                url: "/admin/product/get",
                method: "post",
                data
            }).then(result => {
                const { data } = result;
                if (result.code == 0) {
                    // this.pp = JSON.parse(data.specialSpec)
                    // let productCategoryArr = data.categoryIds.split(",")
                    data.albumPics = data.albumPics.split(',');
                    this.productDetails = data;
                    console.log("this.productDetails", this.productDetails)
                    // if (productCategoryArr != '') {
                    //     for (var i = 0; i < productCategoryArr.length; i++) {
                    //         productCategoryArr[i] = parseInt(productCategoryArr[i])
                    //     }
                    // }

                    // 课程分类
                    // this.productCategory = productCategoryArr
                    // 课程规格
                    this.specificationsList = JSON.parse(data.specialSpec)
                    let indexes = []
                    this.specificationsList.forEach(ele => {
                        indexes.push(0)
                    });
                    // .join('-')
                    this.selectArr = indexes
                    this.productDetails.detailTabs = JSON.parse(data.detailTabs)
                    console.log("this.productCategory.detailTabs ", this.productDetails.detailTabs)
                } else {
                    this.$message.error(data.errMsg || '失败11');
                }

            })
        },
        // 获取当前产品SKU
        getSku() {
            const data = { id: this.$route.query.id }
            axios({
                url: "/admin/productSku/listByProductId",
                method: "post",
                data
            }).then(result => {
                if (result.code == 0) {
                    const { data } = result;
                    this.skuList = data
                }
            })
        },
        // 获取课程分类
        // getProductCategory() {
        //     this.$apis.productCategory().then(res => {
        //         if (res.resp_code == 0 && res.data.list) {
        //             this.productCategoryList = res.data.list
        //         }
        //     })
        // },
        showEditStatus() {
            this.editStatus = true
        },
    }
}
</script>
<style lang="scss" scoped>
.steps {
    width: 100%;
    margin-top: 17px;
    zoom: 1;
    color: #333;
    font-size: 14px;
}
.steps::after {
    content: '.';
    display: block;
    clear: both;
    visibility: hidden;
    font-size: 0;
    height: 0;
    line-height: 0;
}
.step {
    width: 220px;
    height: 40px;
    background: #dcdfe6;
    position: relative;
    .step_b {
        line-height: 40px;
        text-align: center;
    }
}
//旋转的小方形盒子
.rotateBox {
    content: '';
    border: 20px solid #fff;
    border-bottom: none;
    border-left: none;
    background-color: #dcdfe6;
    height: 36px;
    width: 36px;
    position: absolute;
    display: block;
    top: -7px;
    right: 30px;
    z-index: 10;
    transform: rotate(45deg);
}
.step_l {
    margin-right: 0;
}
.active {
    background: #1b93f8 !important;
    color: #fff;
}
//被激活的步骤条的样式
.active .rotateBox {
    color: #fff;
    background-color: #1b93f8;
    content: '';
    border: 20px solid #fff;
    border-bottom: none;
    border-left: none;
    height: 36px;
    width: 36px;
    position: absolute;
    display: block;
    top: -7px;
    right: 30px;
    z-index: 10;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    // -ms-transform:rotate(45deg);  /* IE 9 */
    // -moz-transform:rotate(45deg);   /* Firefox */
    // -webkit-transform:rotate(45deg); /* Safari 和 Chrome */
    // -o-transform:rotate(45deg);   /* Opera */
}
//最后一步取消向右箭头
.step:last-child .rotateBox {
    content: '';
    border: none;
    height: 0;
    width: 0;
    z-index: 11;
}
.container_title {
    color: #333;
    -webkit-text-stroke: 0.2px;
    font-size: 14px;
    margin-bottom: 15px;
}

.product-type {
    position: relative;
    width: 168px;
    padding: 5px;
    border: 1px solid #1b93f8;
    border-radius: 4px;
    .product-type-img {
        width: 64px;
        height: 64px;
        border-radius: 4px;
    }
    .product-select {
        position: absolute;
        width: 16px;
        height: 16px;
        right: -6px;
        bottom: -6px;
    }
}
.merchant-img {
    width: 80px;
    height: 80px;
}
.merchant-img + .merchant-img {
    margin-left: 8px;
}
</style>